<template>
  <van-button 
  :icon="is_collected ? 'star' : 'star-o'"
  :class="{color: is_collected}"
  type="default" 
  :loading="loadingStatus"
  @click="setCollect"
  />
</template>

<script>
import {collectArticleAPI,delColArticleAPI} from '@/api'
export default {
name: 'Collect',
model: {
  prop: 'is_collected',
  event: 'updateCollect'
},
props: {
  is_collected:{
    type: Boolean,
    required: true
  },
  art_id:{
    type: [String,Number,Object],
    required: true
  }
},
data(){
  return {
    loadingStatus: false
  }
},
methods: {
  async setCollect(){
    this.loadingStatus = true
    try {
      if(this.is_collected) {
        //取消收藏
        await delColArticleAPI(this.art_id)
      }
      else {
        await collectArticleAPI(this.art_id)
      }
      //改变视图
      this.$emit('updateCollect',!this.is_collected)
      this.$toast.success(!this.is_collected ? '收藏成功' : '取消收藏成功')
    } catch (error) {
      this.$toast('操作失败，请稍后重试')
    }
    this.loadingStatus = false
  }
}
}
</script>

<style scoped lang="less">
.color{
  color: #ff6c37 !important;
}
</style>